<template>
  <div class="headContainer">
    <div class="headTitle">
      <i class="fa-solid fa-sun text-2xl"></i>
      <p class="titleName">新中地天气</p>
    </div>
    <div class="headInfo">
      <p class="cityName">{{ cityInfo?.city || '未选择城市' }}</p>
      <p class="info">实时天气：{{ cityInfo?.weather?.weather || '--' }} {{
          cityInfo?.weather?.temperature || '--'
        }}°</p>
      <p class="info">{{ cityInfo?.weather?.winddirection || "--" }}风 {{ cityInfo?.weather?.windpower || "--" }}级</p>
    </div>
    <div class="promptLabel">
      <i class="fa-solid fa-circle-info text-xl hover:text-weather-secondary cursor-pointer duration-1000"
         @click="handleClick"></i>
      <i class="fa-solid fa-plus text-xl hover:text-weather-secondary duration-150 cursor-pointer"
         v-show="!props.detailFlag"
         @click="handleSaveCity"></i>
    </div>
  </div>

  <!-- 蒙层 -->
  <div v-if="buttonFlag" class="overlay"></div>

  <!-- 弹窗信息 -->
  <div class="popUpInfo" :class="{ show: buttonFlag }" v-show="buttonFlag" @click.self="closePopUp">
    <h2>关于:</h2>
    <p>这个应用可以用来追踪你选择城市的当前天气</p>
    <br>
    <p>如何使用:</p>
    <p>1.点击搜索框输入你希望追踪的城市</p>
    <p>2.在搜索结果中选中一个城市，你将获取当地最新的天气</p>
    <p>3.点击右侧的＋号可以将追踪城市的天气情况保存在首页</p>
    <br>
    <h2>移除城市:</h2>
    <p>如果你不想在首页关注某个城市,可以通过底部的按钮删除它</p>
    <button @click="closePopUp">关闭</button>
  </div>

</template>

<script setup>
import {ref, defineProps} from 'vue'
import {useCityStore} from '@/stores/cityStore'
import {ElMessage} from 'element-plus'

const buttonFlag = ref(false)
const cityStore = useCityStore()

const props = defineProps({
  detailFlag: {
    type: Boolean,
    default: false
  },
  cityInfo: {
    type: Object,
    default: () => ({})
  },
  saveCityInfo: {
    type: Object,
    default: () => ({})
  }
})

const handleClick = () => {
  buttonFlag.value = true
}

const closePopUp = () => {
  buttonFlag.value = false
}

// 保存城市
const handleSaveCity = () => {
  debugger
  if (!props.saveCityInfo?.adcode) {
    ElMessage.warning('请先选择城市')
    return
  }

  // 检查是否已保存
  const isAlreadySaved = cityStore.cityList.some(city => city.adcode === props.saveCityInfo.adcode)
  if (isAlreadySaved) {
    ElMessage.warning('该城市已经保存过了')
    return
  }

  console.log(props.saveCityInfo)

  cityStore.addCity({
    adcode: props.saveCityInfo.adcode,
    city: props.saveCityInfo.city,
    weather: props.saveCityInfo.weather
  })

  ElMessage.success('城市保存成功')
}
</script>

<style scoped lang="scss">

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
  border-color: #e5e7eb;
}

.popUpInfo {
  width: 330px;
  height: 296px;
  background-color: white;
  color: black;
  padding: 1rem;
  margin-top: 8rem;
  position: absolute;
  left: 43%;
  top: 3%;
  z-index: 1000 !important;

  h2 {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
  }

  p {
    font-size: 12px;
    line-height: 16px;
  }

  button {
    margin-top: 32px;
    width: 72px;
    height: 32px;
    background-color: rgb(0 102 138 / 1);
    color: white;
    cursor: pointer;
  }

  /* 弹窗的渐变效果 */
  transition: all 0.3s ease;
  opacity: 0;
  transform: scale(0.8);

  &.show {
    opacity: 1;
    transform: scale(1);
  }
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100;
}

.headContainer {
  display: flex;
  color: white;
  gap: 1rem;
  width: 100%; /* 100% 宽度 用于解决i标签 margin-left: auto 失效的问题 */

  /* 头部标题 */
  .headTitle {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .75rem;

    .titleName {
      font-size: 1.5rem;
      line-height: 2rem;;
    }

    i {
      font-size: 1.5rem;
      line-height: 2rem;
    }
  }

  /* 头部信息 */
  .headInfo {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;

    .cityName {
      font-size: 1.125rem;
      line-height: 1.75rem;
    }

    .info {
      font-size: .875rem;
      line-height: 1.25rem;
    }
  }

  /* 提示标签 */
  .promptLabel {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: auto;

    i {
      font-size: 1.25rem;
      line-height: 1.75rem;
      color: #e5e7eb;
      transition: all .3s ease-in-out;
      margin-left: auto;
      cursor: pointer;

      &:hover {
        color: #fbbf24; /* hover 时的颜色 */
      }
    }
  }

}

</style>
